<template>
  <div v-if="list.length">
    {{ list }}
    <div class="edit_b_content"
    v-for="(data, idx) in list"
    :key="idx">
    <!-- <p>{{list[idx]}}</p> -->
    <ul class="info_list clearfix">
      <li v-if="id == 'basicInfo'">
        
        <b v-if="id == 'basicInfo'">您的姓名</b>
        
        <input type="text" maxlength="100" v-model="dataList[idx].titleName" @input="inputAction(idx)"
        :placeholder="placeholderVal.title"/>
      </li>
      <li v-if="id == 'work'">
        <b>公司名称</b>
        <input type="text" maxlength="100" v-model="companyList[idx].titleName" @input="inputAction(idx, 'work')"
        :placeholder="placeholderVal.title"/>
      </li>
      <li v-if="id == 'project'">
        <b>项目名称</b>
        <!-- <input type="text" maxlength="100" v-model="projectList[idx].titleName" @input="inputAction(idx, 'project')"
        :placeholder="placeholderVal.title"/> -->
      </li>
      <li>
        <b v-if="id == 'work'">职位</b>
        <b v-if="id == 'project'">参与角色</b>
        <b v-if="id == 'basicInfo'">联系电话</b>
        <input type="text" v-if="id == 'basicInfo'" v-model="dataList[idx].roleName" @input="inputAction(idx)" :placeholder="placeholderVal.title1" class="input">
        <!-- <input type="text" v-if="id == 'work'" v-model="companyList[idx].roleName" @input="inputAction(idx, 'work')" :placeholder="placeholderVal.title1" class="input"> -->
        <!-- <input type="text" v-if="id == 'project'" v-model="projectList[idx].roleName" @input="inputAction(idx, 'project')" :placeholder="placeholderVal.title1" class="input"> -->
      </li>
      <li  v-if="id === 'work'">
        <b>项目时间</b>
        <!-- <input type="text" v-model="companyList[idx].time" @input="inputAction(idx)" placeholder="请输入项目时间" class="input"> -->
      </li>
      <li  v-if="id === 'project'">
        <b>项目时间</b>
        <!-- <input type="text" v-model="projectList[idx].time" @input="inputAction(idx)" placeholder="请输入项目时间" class="input"> -->
      </li>
      <li v-if="id === 'basicInfo'">
        <b>联系邮箱</b>
        <input type="text" v-model="dataList[idx].emails" @input="inputAction(idx)" placeholder="请输入联系邮箱" class="input">
      </li>
      <li  v-if="id === 'basicInfo'">
        <b>工作年限</b>
        <input type="text" v-model="dataList[idx].years" @input="inputAction(idx)" placeholder="请输入工作年限" class="input">
      </li>
      <li  v-if="id === 'basicInfo'">
        <b>学校</b>
        <input type="text" v-model="dataList[idx].school" @input="inputAction(idx)" placeholder="请输入学校" class="input">
      </li>
    </ul>
    <resume-edit  v-if="id !== 'basicInfo'" :cur-id="curId" @inputValue="inputValue" :cur-index="idx"></resume-edit>
  </div>
  </div>
  
</template>
<script>
import { defineComponent, computed, reactive, toRefs, onMounted , watch } from 'vue';
import resumeEdit from './EditAction.vue';
export default defineComponent ({
  components: {
    resumeEdit
  },
  props: {
    index: String | Number,
    id: String,
    workList: Array,
    nums: Number,
  },
  setup(props, context) {
    console.log('props----', props);
    // let { titleName } = props
    const dataList = reactive([{
      content: '',
      titleName: '',
      roleName: '',
      time: '',
      curIndex: 0,
      idName: props.id,
      email: '',
      years: '',
      school: '',
    }]);
    const companyList = reactive([{
      content: '',
      titleName: '',
      roleName: '',
      curIndex: 0,
      idName: props.id,
    }]);
    const projectList = reactive([{
      content: '',
      titleName: '',
      roleName: '',
      curIndex: 0,
      idName: props.id,
    }]);
    const placeholderVal = computed(() => {
      const { id } = props;
      let value = '';
      let value1 = '';
      if (id === 'work') {
        value = '请输入公司名称';
        value1 = '请输入职位名称';
      }
      if (id === 'project') {
        value = '请输入项目名称';
        value1 = '请输入角色名称';
      }
      if (id=== 'basicInfo') {
        value = '输入您的姓名';
        value1 = '输入联系电话';
      }
      return {
        title: value,
        title1: value1
      };
    })
    const list = computed(() => {
      return props.workList;
    });
    const curId = computed(() => {
      return props.id;
    });
    const curIndex = computed(() => {
      return props.index;
    });
    const workData = list.value;
    const changeWork = () => {
      companyList.push({
        content: '',
        titleName: '',
        roleName: '',
        time: '',
        curIndex: 0,
        idName: props.id,
      });
      console.log('companyList---', companyList);
    };

    const changeProject = () => {
      projectList.push({
        content: '',
        titleName: '',
        roleName: '',
        time: '',
        curIndex: 0,
        idName: props.id,
      });
      console.log('projectList----', projectList);
    };

    const inputValue = (res) => {
      console.log(res);
      workData[res.index].content = res.value;
      workData[res.index].idName = props.id;
      // workDataList.workData.curIndex = res.index;
      context.emit('work-input', JSON.stringify(workData));
    };
    const inputAction = (value, type) => {
      // console.log(dataList, value);
      console.log(type);
      if (!type) {
        dataList.curIndex = value;
        workData[value].titleName = dataList[value].titleName;
        workData[value].roleName = dataList[value].roleName;
        workData[value].time = dataList[value].time;
        workData[value].curIndex = value;
        workData[value].content = dataList[value].content;
        workData[value].idName = props.id;
        workData[value].email = dataList[value].emails;
        workData[value].years = dataList[value].years;
        workData[value].school = dataList[value].school;
      }
      if (type === 'work') {
        workData[value].titleName = companyList[value].titleName;
      }
      
      console.log('workData', workData);
      context.emit('work-input', JSON.stringify(workData));
    };
    
    onMounted(() => {
      let { id, workList } = props;
      let resumeData = window.localStorage.getItem('RESUME_DATA');
      if (resumeData) {
        let resume = JSON.parse(resumeData).list;
        if (resume[0].idName === 'basicInfo') {
          dataList[0].titleName  = resume[0]?.project?.titleName || '';
          dataList[0].roleName  = resume[0]?.project?.roleName || '';
          dataList[0].email  = resume[0]?.project?.email || '';
          dataList[0].years  = resume[0]?.project?.years || '';
          dataList[0].school  = resume[0]?.project?.school || '';
        }
        if (resume[2].idName === 'work') {
          // companyList.project = resume[2].project;
          console.log('companyList----', resume);
        }
      }
    });

    return { list, inputValue, curId, curIndex, inputAction, dataList, placeholderVal, companyList, projectList, changeWork, changeProject };
  },
})
</script>

<!-- <script setup>
import { defineProps, computed, reactive, toRefs, onMounted , watch } from 'vue';
import resumeEdit from './EditAction.vue';
const props = defineProps({
  index: String | Number,
  id: String,
  workList: Array,
  nums: Number,
  value: Number,
});

const dataList = reactive([{
    content: '',
    titleName: '',
    roleName: '',
    time: '',
    curIndex: 0,
    idName: props.id,
    email: '',
    years: '',
    school: '',
  }]);
  const companyList = reactive([{
    content: '',
    titleName: '',
    roleName: '',
    curIndex: 0,
    idName: props.id,
  }]);
  const projectList = reactive([{
    content: '',
    titleName: '',
    roleName: '',
    curIndex: 0,
    idName: props.id,
  }]);
  const placeholderVal = computed(() => {
    const { id } = props;
    let value = '';
    let value1 = '';
    if (id === 'work') {
      value = '请输入公司名称';
      value1 = '请输入职位名称';
    }
    if (id === 'project') {
      value = '请输入项目名称';
      value1 = '请输入角色名称';
    }
    if (id=== 'basicInfo') {
      value = '输入您的姓名';
      value1 = '输入联系电话';
    }
    return {
      title: value,
      title1: value1
    };
  });
  const list = computed(() => {
      return props.workList;
    });
    const curId = computed(() => {
      return props.id;
    });
    const curIndex = computed(() => {
      return props.index;
    });
    const workData = list.value;

    watch(props.nums, (val) => {
      console.log('变化了---'+props.idName, val);
    }, { immediate: true });

    const inputValue = (res) => {
      console.log(res);
      workData[res.index].content = res.value;
      workData[res.index].idName = props.id;
      // workDataList.workData.curIndex = res.index;
      context.emit('work-input', JSON.stringify(workData));
    };
    const inputAction = (value, type) => {
      // console.log(dataList, value);
      console.log(type);
      if (!type) {
        dataList.curIndex = value;
        workData[value].titleName = dataList[value].titleName;
        workData[value].roleName = dataList[value].roleName;
        workData[value].time = dataList[value].time;
        workData[value].curIndex = value;
        workData[value].content = dataList[value].content;
        workData[value].idName = props.id;
        workData[value].email = dataList[value].emails;
        workData[value].years = dataList[value].years;
        workData[value].school = dataList[value].school;
      }
      if (type === 'work') {
        workData[value].titleName = companyList[value].titleName;
      }
      
      console.log('workData', workData);
      context.emit('work-input', JSON.stringify(workData));
    };
    
    onMounted(() => {
      let { id, workList, nums } = props;
      console.log(props);
      let resumeData = window.localStorage.getItem('RESUME_DATA');
      if (resumeData) {
        let resume = JSON.parse(resumeData).list;
        if (resume[0].idName === 'basicInfo') {
          dataList[0].titleName  = resume[0]?.project?.titleName || '';
          dataList[0].roleName  = resume[0]?.project?.roleName || '';
          dataList[0].email  = resume[0]?.project?.email || '';
          dataList[0].years  = resume[0]?.project?.years || '';
          dataList[0].school  = resume[0]?.project?.school || '';
        }
        if (resume[2].idName === 'work') {
          // companyList.project = resume[2].project;
          console.log('companyList----', resume);
        }
      }
    });
</script> -->
